<template>
  <template v-for="item in menus" :key="item.id" >
    <el-sub-menu v-if="item.children && item.children.length" :index="item.url || item.id + ''">
      <template #title>
        <span @click="handleParentMenuClick(item)">{{ item.menuName }}</span>
      </template>
      <!-- 递归渲染子菜单 -->
      <MenuTree :menus="item.children" />
    </el-sub-menu>
    <el-menu-item v-else :index="item.url" @click="handleMenuClick(item)">
      {{ item.menuName }}
    </el-menu-item>
  </template>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

defineProps({
  menus: {
    type: Array,
    required: true
  }
})

// 处理父菜单点击
const handleParentMenuClick = (item) => {
  if (item.url) {
    router.push(item.url)
  }
}

// 处理子菜单点击
const handleMenuClick = (item) => {
  if (item.url) {
    router.push(item.url)
  }
}
</script>

<style scoped>
/* 为父菜单标题添加点击样式 */
.el-sub-menu__title span {
  cursor: pointer;
  width: 100%;
  display: inline-block;
}

.el-sub-menu__title span:hover {
  color: #409eff;
}
</style>